<!--
	作者：1055471363@qq.com
	时间：2017-12-12
	描述：当前设备作业量
-->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>当前设备作业量</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="../../base.js"></script>
		<style>
			.mui-bar {
				background-color: #0088BB;
			}
			
			.mui-title {
				color: #FFFFFF
			}
			
			a {
				color: #FFFFFF
			}
			
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			
			h5:first-child {
				margin-top: 15px;
			}
			
			.mui-slider {
				z-index: 1;
				margin-top: 20px;
				overflow: hidden;
				width: 90%;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 90px;
				max-width: 90px;
				height: 90px;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #EC971F;
			}
			/*text-indent属性规定文本块中首行文本的缩进。 注释:允许使用负值*/
			
			table tr {
				/*text-indent: 20px;*/
				line-height: 30px;
			}
			
			input {
				float: right !important;
				/*height: 35px;*/
				display: block;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="user">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

			<h1 class="mui-title">当前设备作业量{{name}}</h1>
		</header>
		<div class="mui-content" id="curEqp">
			<div class="mui-input-row">
				<label>EQP ID:</label>
				<input ref="input" id="inputId" type="text" @keyup="keyup" class="mui-input-clear" placeholder="请扫描设备条码">
			</div>
			<div class="mui-row">

				<ul class="mui-table-view" style="margin-top: 10px;">
					<li class="mui-table-view-cell mui-media">
						<table>
							<tr>
								<td>
									<p>LOT ID：<span id="hid">{{items.LotId}}</span></p>
								</td>
								<td> </td>
								<td>
									<p> 报警次数：<span id="hname">{{items.TotalQty}}</span></p>
								</td>
							</tr>
							<tr>
								<td>
									<p>当前作业量：<span>{{items.DoneQty}}</span></p>
								</td>
								<td> </td>
								<td>
									<p>计划作业量：<span>{{items.TotalQty}}</span></p>
								</td>
							</tr>
							<tr>
								<td>
									<p>完成比例：<span>{{items.YieID}}%</span></p>
								</td>
							</tr>
						</table>

					</li>
				</ul>
			</div>
			<div class="mui-content-padded">
				<!--<h2>环形图示例</h5>-->
				<div class="chart" id="pieChart"></div>
			</div>

		</div>
		<!--<script src="../../libs/echarts-all.js"></script>-->
		<script type="text/javascript" src="../../js/echarts.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			/**自动聚焦start**/
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			//			var showSoftInput = function() {
			//				if(mui.os.android) {
			//					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
			//				} else {
			//					nativeWebview.plusCallMethod({
			//						"setKeyboardDisplayRequiresUserAction": false
			//					});
			//				}
			//				setTimeout(function() {
			//					var inputElem = document.querySelector('input');
			//					inputElem.focus();
			//					inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式
			//				}, 1);
			//			};
			var showSoftInput = function() {
				var nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				if(mui.os.android) {
					//强制当前webview获得焦点
					plus.android.importClass(nativeWebview);
					nativeWebview.requestFocus();
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					//此处可写具体逻辑设置获取焦点的input
					var inputElem = document.querySelector('input');
					inputElem.focus();
				}, 1);
			};

			mui.plusReady(function() {
				initNativeObjects();
				showSoftInput();
			});

			/**自动聚焦end**/
			var user = localStorage.getItem("user")
			var app = new Vue({
				el: '#user',
				data: {
					name: "(" + user + ")"
				}
			})
			var vm = new Vue({
				el: '#curEqp',
				data: {
					//					banner: {}, //顶部工号数据
					items: {}, //table信息流数据
					eqpId: ""
				},
				mounted: function() {},
				methods: {
					keyup(e) {

						if(e === null || e.keyCode === 13) {

							var _this = this;
							mui.ajax(base + '/searchEQPInfo.json', {
								data: {
									EqpId: e.target.value
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 30000, //超时时间设置为10秒；
								async: true,
								success: function(data) {
									//关闭软键盘
									document.activeElement.blur();
									_this.items = data;
									_this.displayChart(data.YieID);
									//清空文本
									e.target.value = '';
								},
								error: function(xhr, type, errorThrown) {
									mui.toast("网络异常");
								}
							});　
						}
					},
					displayChart: function(percent) {
						var myChart = echarts.init(document.getElementById("pieChart"));
						option = {
							title: {
								//          text: '50%',
								//          x: 'center',
								//          y: 'center',
								textStyle: {
									fontWeight: 'normal',
									color: '#0580f2',
									fontSize: '30'
								}
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							//      legend: {
							//          orient: 'vertical',
							//          left: 'left',
							//          data: ['占有率']
							//      },
							series: [{
								name: '饼图二',
								type: 'pie',
								radius: ['80%', '90%'],
								label: {
									normal: {
										position: 'center'
									}
								},
								data: [{
									value: percent,
									name: '完成比例',
									label: {
										normal: {
											formatter: '{d} %',
											textStyle: {
												fontSize: 50
											}
										}
									}
								}, {
									value: 100 - percent,
									name: '占位',
									label: {
										normal: {
											formatter: '\n完成率',
											textStyle: {
												color: '#555',
												fontSize: 20
											}
										}
									},
									tooltip: {
										show: false
									},
									itemStyle: {
										normal: {
											color: '#aaa'
										},
										emphasis: {
											color: '#aaa'
										}
									},
									hoverAnimation: false
								}]
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						if(option && typeof option === "object") {
							myChart.setOption(option, true);
						}
					}
				}
			})

			document.onkeydown = function(e) { //对整个页面文档监听
				var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
				//判断如果用户按下了回车键（keycody=13）
				//console.log("keyNum:"+keyNum);
				if(keyNum == 119) {
					document.getElementById("inputId").focus();
				}
			}
		</script>
	</body>

</html>